import FlowGraph from '../../../graph/index'

export function gridOpt(globalGridAttr) {
  const options = {
    visible: globalGridAttr.visible,
    type: globalGridAttr.type,
    args: [
      {
        color: globalGridAttr.color,
        thickness: globalGridAttr.thickness
      }
    ]
  }
  if (globalGridAttr.type === 'doubleMesh') {
    options.args.push({
      color: globalGridAttr.colorSecond,
      thickness: globalGridAttr.thicknessSecond,
      factor: globalGridAttr.factor
    })
  }
  const { graph } = FlowGraph
  graph.drawGrid(options)
}

export function gridSizeOpt(globalGridAttr) {
  const { graph } = FlowGraph
  graph.setGridSize(globalGridAttr.size)
}

const tryToJSON = (val) => {
  try {
    return JSON.parse(val)
  } catch (error) {
    return val
  }
}

export function backGroundOpt(globalGridAttr) {
  const options = {
    color: globalGridAttr.bgColor,
    image: globalGridAttr.showImage ? require('@/assets/logo.svg') : undefined,
    repeat: globalGridAttr.repeat,
    angle: globalGridAttr.angle,
    size: tryToJSON({ width: globalGridAttr.bgSize, height: globalGridAttr.bgSize }),
    position: tryToJSON(globalGridAttr.position),
    opacity: globalGridAttr.opacity
  }
  const { graph } = FlowGraph
  graph.drawBackground(options)
}
